
    <h2>TreeGrid with Footer</h2>
    <p>Show summary information on TreeGrid footer.</p>
    <div style="margin:20px 0;"></div>
    <table id="tg"></table>
    <script type="text/javascript">
        $(function(){
            $('#tg').treegrid({
				cls:'treegrid',
                title:'TreeGrid with Footer',
                iconCls:'icon-ok',
                width:700,
                height:250,
                rownumbers: true,
                animate:true,
                collapsible:true,
                fitColumns:true,
                url:'example/treegrid/treegrid_data2.json',
                method: 'get',
                idField:'id',
                treeField:'name',
                showFooter:true,
                columns:[[
                    {title:'Task Name',field:'name',width:180},
                    {field:'persons',title:'Persons',width:60,align:'right'},
                    {field:'begin',title:'Begin Date',width:80},
                    {field:'end',title:'End Date',width:80},
                    {field:'progress',title:'Progress',width:120,
                        formatter:function(value){
                            if (value){
                                var s = '<div style="width:100%;border:1px solid #ccc">' +
                                        '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
                                        '</div>';
                                return s;
                            } else {
                                return '';
                            }
                        }
                    }
                ]]
            });
        })
    </script>
